<template>
	<div class="page">
		<div class="title">登录账号</div>
		<!-- <div class="sub">首次登录会自动创建账号</div> -->
		<div class="form">
			<div class="code" @click="$refs.input.focus">
				<div
					class="code__item"
					:class="{ 'code__item--ac': smsCode[i - 1] }"
					v-for="i in 4"
				>
					{{ smsCode[i - 1] || '' }}
				</div>
			</div>
			<div class="foot">
				<span v-if="$store.getters.wait"> {{ $store.getters.wait }}s </span>
				<span class="btn" v-else @click="getVerifyCode">重新获取</span>
			</div>
		</div>
		<input
			ref="input"
			maxlength="4"
			type="text"
			v-model="smsCode"
			inputmode="numeric"
			pattern="[0-9]*"
			style="opacity: 0"
		/>
		<van-button
			class="submit"
			block
			round
			@click="login"
			:disabled="smsCode.length < 4"
			>立即登录</van-button
		>
	</div>
</template>

<script>
import { sendSmsCode, checkCode } from '@/api'
import { showToast } from 'vant'
export default {
	data() {
		return {
			smsCode: ''
		}
	},
	computed: {
		// ...mapGetters(['userProfile'])
	},
	methods: {
		async getVerifyCode() {
			try {
				await sendSmsCode(this.$route.query.phone)
				showToast('短信验证码已发送')
				this.$store.dispatch('startWait')
			} catch (e) {
				showToast(e.msg)
			}
		},
		login() {
			var params = {
				code: this.smsCode,
				...this.$route.query
			}
			checkCode(params)
				.then((res) => {
					this.$store.dispatch('login', res.data)
					return this.$store.dispatch('getUserInfo')
				})
				.then(() => {
					this.$router.replace({
						path: '/'
					})
				})
				.catch(console.error)
		}
	}
}
</script>

<style lang="scss" scoped>
.page {
	min-height: 100vh;
}

.code {
	display: flex;
	justify-content: space-between;

	&__item {
		border-radius: $border_radius_2;
		border: 4px solid #fff;
		display: flex;
		width: 110px;
		height: 110px;
		align-items: center;
		justify-content: center;
		background: #fff;
		font-size: $font_large;
		box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);

		&--ac {
			border-color: $color_main;
		}
	}
}

.foot {
	font-size: $font_small;
	margin-top: $space_2;
	color: #999;
	text-align: right;
	.btn {
		color: $color_main;
	}
}

.page {
	min-height: 100vh;
	box-sizing: border-box;
	padding: 50px;

	.title {
		font-size: $font_max;
		color: #000;
		margin-bottom: $space_2;
	}

	.sub {
		font-size: $font_medium;
		color: #999;
		font-weight: 600;
	}

	.form {
		margin-top: 150px;
		padding-inline: $space_3;
		font-size: $font_medium;
	}

	.submit {
		color: #fff;
		background: linear-gradient(to left, $color_main 60%, $color_main 100%);
		margin-block: 36px;
		margin: 0 auto;
		width: 300px;
	}
}

input {
	border: none;
	outline: none;
}
</style>
